<template>
  <div class="suanzhu-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2 class="page-title">
        <span class="logo">🧮</span>
        算珠网关信息查询
      </h2>
    </div>

    <!-- 查询区域 -->
    <div class="search-section">
      <div class="search-form">
        <div class="form-row">
          <a-select
            v-model:value="selectedProduct"
            placeholder="选择支付产品"
            style="width: 200px"
            :loading="productLoading"
            disabled
          >
            <a-select-option
              v-for="product in productList"
              :key="product.productId"
              :value="product.productId"
            >
              <div class="product-option">
                <img :src="product.productIcon" :alt="product.productName" class="product-icon" />
                {{ product.productName }}
              </div>
            </a-select-option>
          </a-select>

          <a-tag v-if="connectModeText" :color="connectModeColor" class="connect-mode-tag">
            {{ connectModeText }}
          </a-tag>
        </div>

        <div class="form-row">
          <a-input
            v-model:value="inputQrcode"
            placeholder="请输入二维码ID"
            style="width: 300px"
            @pressEnter="handleSearch"
          />
          <a-button type="primary" @click="handleSearch" :loading="loading">
            查询
          </a-button>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-section">
      <a-spin />
      <span class="loading-text">查询中...</span>
    </div>

    <!-- 错误信息 -->
    <a-alert
      v-if="error && !loading"
      :message="error"
      type="error"
      show-icon
      closable
      @close="error = ''"
      style="margin-bottom: 16px"
    />

    <!-- 数据展示区域 -->
    <div v-if="data && !loading && !error" class="data-section">
      <!-- 二维码信息 -->
      <div class="info-section">
        <h3 class="section-title">二维码信息</h3>
        <a-table
          :columns="qrcodeColumns"
          :data-source="qrcodeTableData"
          :pagination="false"
          size="small"
          bordered
        />
      </div>

      <!-- 应用信息 -->
      <div v-if="data.appInfo" class="info-section">
        <h3 class="section-title">应用配置信息</h3>
        <a-table
          :columns="appColumns"
          :data-source="appTableData"
          :pagination="false"
          size="small"
          bordered
        />
      </div>

      <!-- 商户信息 -->
      <div v-if="data.merchantInfo" class="info-section">
        <h3 class="section-title">商户信息</h3>
        <a-table
          :columns="merchantColumns"
          :data-source="merchantTableData"
          :pagination="false"
          size="small"
          bordered
        />
      </div>

      <!-- 直连模式：优先显示直连商户渠道配置 -->
      <template v-if="isDirectMode">
        <!-- 直连商户渠道配置 -->
        <div class="info-section">
          <h3 class="section-title">
            直连商户渠道配置
            <span v-if="!data.directMerchantChannelConfig" class="no-data-indicator">（暂无数据）</span>
          </h3>
          <a-table
            v-if="data.directMerchantChannelConfig"
            :columns="channelConfigColumns"
            :data-source="directMerchantChannelConfigTableData"
            :pagination="false"
            size="small"
            bordered
          />
          <div v-else class="no-data-placeholder">
            <a-empty description="未找到直连商户渠道配置" :image="false" />
          </div>
        </div>

        <!-- 服务商信息（直连模式不需要，放在最后） -->
        <div v-if="data.serviceProviderInfo" class="info-section disabled-section">
          <h3 class="section-title">服务商信息</h3>
          <a-table
            :columns="providerColumns"
            :data-source="providerTableData"
            :pagination="false"
            size="small"
            bordered
          />
          <div class="disabled-overlay">
            <div class="disabled-message">
              <span class="disabled-icon">🚫</span>
              <div class="disabled-text">直连模式不需要用到这个数据</div>
            </div>
          </div>
        </div>

        <!-- 服务商渠道配置（直连模式不需要，放在最后） -->
        <div class="info-section disabled-section">
          <h3 class="section-title">
            服务商渠道配置
            <span v-if="!data.serviceProviderChannelConfig" class="no-data-indicator">（暂无数据）</span>
          </h3>
          <a-table
            v-if="data.serviceProviderChannelConfig"
            :columns="channelConfigColumns"
            :data-source="serviceProviderChannelConfigTableData"
            :pagination="false"
            size="small"
            bordered
          />
          <div v-else class="no-data-placeholder">
            <a-empty description="未找到服务商渠道配置" :image="false" />
          </div>
          <div class="disabled-overlay">
            <div class="disabled-message">
              <span class="disabled-icon">🚫</span>
              <div class="disabled-text">直连模式不需要用到这个数据</div>
            </div>
          </div>
        </div>

        <!-- 子商户渠道配置（直连模式不需要，放在最后） -->
        <div class="info-section disabled-section">
          <h3 class="section-title">
            子商户渠道配置
            <span v-if="!data.subMerchantChannelConfig" class="no-data-indicator">（暂无数据）</span>
          </h3>
          <a-table
            v-if="data.subMerchantChannelConfig"
            :columns="channelConfigColumns"
            :data-source="subMerchantChannelConfigTableData"
            :pagination="false"
            size="small"
            bordered
          />
          <div v-else class="no-data-placeholder">
            <a-empty description="未找到子商户渠道配置" :image="false" />
          </div>
          <div class="disabled-overlay">
            <div class="disabled-message">
              <span class="disabled-icon">🚫</span>
              <div class="disabled-text">直连模式不需要用到这个数据</div>
            </div>
          </div>
        </div>
      </template>

      <!-- 间连模式：优先显示服务商和子商户相关配置 -->
      <template v-else-if="isIndirectMode">
        <!-- 服务商信息 -->
        <div v-if="data.serviceProviderInfo" class="info-section">
          <h3 class="section-title">服务商信息</h3>
          <a-table
            :columns="providerColumns"
            :data-source="providerTableData"
            :pagination="false"
            size="small"
            bordered
          />
        </div>

        <!-- 服务商渠道配置 -->
        <div class="info-section">
          <h3 class="section-title">
            服务商渠道配置
            <span v-if="!data.serviceProviderChannelConfig" class="no-data-indicator">（暂无数据）</span>
          </h3>
          <a-table
            v-if="data.serviceProviderChannelConfig"
            :columns="channelConfigColumns"
            :data-source="serviceProviderChannelConfigTableData"
            :pagination="false"
            size="small"
            bordered
          />
          <div v-else class="no-data-placeholder">
            <a-empty description="未找到服务商渠道配置" :image="false" />
          </div>
        </div>

        <!-- 子商户渠道配置 -->
        <div class="info-section">
          <h3 class="section-title">
            子商户渠道配置
            <span v-if="!data.subMerchantChannelConfig" class="no-data-indicator">（暂无数据）</span>
          </h3>
          <a-table
            v-if="data.subMerchantChannelConfig"
            :columns="channelConfigColumns"
            :data-source="subMerchantChannelConfigTableData"
            :pagination="false"
            size="small"
            bordered
          />
          <div v-else class="no-data-placeholder">
            <a-empty description="未找到子商户渠道配置" :image="false" />
          </div>
        </div>

        <!-- 直连商户渠道配置（间连模式不需要，放在最后） -->
        <div class="info-section disabled-section">
          <h3 class="section-title">
            直连商户渠道配置
            <span v-if="!data.directMerchantChannelConfig" class="no-data-indicator">（暂无数据）</span>
          </h3>
          <a-table
            v-if="data.directMerchantChannelConfig"
            :columns="channelConfigColumns"
            :data-source="directMerchantChannelConfigTableData"
            :pagination="false"
            size="small"
            bordered
          />
          <div v-else class="no-data-placeholder">
            <a-empty description="未找到直连商户渠道配置" :image="false" />
          </div>
          <div class="disabled-overlay">
            <div class="disabled-message">
              <span class="disabled-icon">🚫</span>
              <div class="disabled-text">间连模式不需要用到这个数据</div>
            </div>
          </div>
        </div>
      </template>

      <!-- 未知模式或无连接模式信息时的默认显示 -->
      <template v-else>
        <!-- 服务商信息 -->
        <div v-if="data.serviceProviderInfo" class="info-section">
          <h3 class="section-title">服务商信息</h3>
          <a-table
            :columns="providerColumns"
            :data-source="providerTableData"
            :pagination="false"
            size="small"
            bordered
          />
        </div>

        <!-- 服务商渠道配置 -->
        <div class="info-section">
          <h3 class="section-title">
            服务商渠道配置
            <span v-if="!data.serviceProviderChannelConfig" class="no-data-indicator">（暂无数据）</span>
          </h3>
          <a-table
            v-if="data.serviceProviderChannelConfig"
            :columns="channelConfigColumns"
            :data-source="serviceProviderChannelConfigTableData"
            :pagination="false"
            size="small"
            bordered
          />
          <div v-else class="no-data-placeholder">
            <a-empty description="未找到服务商渠道配置" :image="false" />
          </div>
        </div>

        <!-- 子商户渠道配置 -->
        <div class="info-section">
          <h3 class="section-title">
            子商户渠道配置
            <span v-if="!data.subMerchantChannelConfig" class="no-data-indicator">（暂无数据）</span>
          </h3>
          <a-table
            v-if="data.subMerchantChannelConfig"
            :columns="channelConfigColumns"
            :data-source="subMerchantChannelConfigTableData"
            :pagination="false"
            size="small"
            bordered
          />
          <div v-else class="no-data-placeholder">
            <a-empty description="未找到子商户渠道配置" :image="false" />
          </div>
        </div>

        <!-- 直连商户渠道配置 -->
        <div class="info-section">
          <h3 class="section-title">
            直连商户渠道配置
            <span v-if="!data.directMerchantChannelConfig" class="no-data-indicator">（暂无数据）</span>
          </h3>
          <a-table
            v-if="data.directMerchantChannelConfig"
            :columns="channelConfigColumns"
            :data-source="directMerchantChannelConfigTableData"
            :pagination="false"
            size="small"
            bordered
          />
          <div v-else class="no-data-placeholder">
            <a-empty description="未找到直连商户渠道配置" :image="false" />
          </div>
        </div>
      </template>
    </div>

    <!-- 无数据状态 -->
    <a-empty
      v-if="!data && !loading && !error && hasSearched"
      description="未找到相关信息"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { apiPayProductDictFetchList } from '@/miaoma/payproductdict/api'
import type { PayProductDict } from '@/miaoma/payproductdict/types'

interface QrcodeInfo {
  qrcodeId?: string
  merchantId?: string
  appId?: string
  storeId?: string
  batchId?: string
  status?: number
  qrCodeUrl?: string
  remark?: string
  extrainfo?: string
  createdTime?: string
  updatedTime?: string
}

interface AppInfo {
  appId?: string
  appName?: string
  merchantId?: string
  appType?: number
  connectMode?: number
  status?: number
  notifyUrl?: string
  returnUrl?: string
  createdTime?: string
  updatedTime?: string
}

interface MerchantInfo {
  merchantId?: string
  merchantName?: string
  providerId?: string
  agentId?: string
  contactName?: string
  contactTelephone?: string
  status?: number
  remark?: string
  createdTime?: string
  updatedTime?: string
}

interface ServiceProviderInfo {
  providerId?: string
  providerName?: string
  providerType?: number
  contactPerson?: string
  contactPhone?: string
  contactEmail?: string
  merchantCount?: number
  status?: number
  createdTime?: string
  updatedTime?: string
}

interface ChannelConfigInfo {
  configId?: string
  configType?: number
  ownerId?: string
  ownerType?: number
  channelCode?: string
  connectMode?: number
  configData?: string
  createdTime?: string
  updatedTime?: string
}

interface SuanzhuData {
  qrcodeInfo?: QrcodeInfo
  appInfo?: AppInfo
  merchantInfo?: MerchantInfo
  serviceProviderInfo?: ServiceProviderInfo
  serviceProviderChannelConfig?: ChannelConfigInfo
  subMerchantChannelConfig?: ChannelConfigInfo
  directMerchantChannelConfig?: ChannelConfigInfo
  error?: string
}

export default defineComponent({
  name: 'SuanzhuPage',
  setup() {
    const route = useRoute()
    const inputQrcode = ref<string>('')
    const data = ref<SuanzhuData | null>(null)
    const loading = ref<boolean>(false)
    const error = ref<string>('')
    const hasSearched = ref<boolean>(false)

    // 产品相关状态
    const selectedProduct = ref<string>('')
    const productList = ref<PayProductDict[]>([])
    const productLoading = ref<boolean>(false)

    // 连接模式相关
    const connectModeText = computed(() => {
      if (data.value?.appInfo?.connectMode) {
        return getConnectModeText(data.value.appInfo.connectMode)
      }
      return ''
    })

    const connectModeColor = computed(() => {
      const mode = data.value?.appInfo?.connectMode
      return mode === 1 ? 'green' : mode === 2 ? 'blue' : 'default'
    })

    // 连接模式判断
    const isDirectMode = computed(() => {
      return data.value?.appInfo?.connectMode === 1
    })

    const isIndirectMode = computed(() => {
      return data.value?.appInfo?.connectMode === 2
    })

    // 表格列定义
    const qrcodeColumns = [
      { title: '字段', dataIndex: 'field', key: 'field', width: 120 },
      { title: '值', dataIndex: 'value', key: 'value' }
    ]

    const appColumns = [
      { title: '字段', dataIndex: 'field', key: 'field', width: 120 },
      { title: '值', dataIndex: 'value', key: 'value' }
    ]

    const merchantColumns = [
      { title: '字段', dataIndex: 'field', key: 'field', width: 120 },
      { title: '值', dataIndex: 'value', key: 'value' }
    ]

    const providerColumns = [
      { title: '字段', dataIndex: 'field', key: 'field', width: 120 },
      { title: '值', dataIndex: 'value', key: 'value' }
    ]

    // 表格数据
    const qrcodeTableData = computed(() => {
      if (!data.value?.qrcodeInfo) return []
      const info = data.value.qrcodeInfo
      return [
        { key: '1', field: '二维码ID', value: info.qrcodeId || '-' },
        { key: '2', field: '商户ID', value: info.merchantId || '-' },
        { key: '3', field: '应用ID', value: info.appId || '-' },
        { key: '4', field: '门店ID', value: info.storeId || '-' },
        { key: '5', field: '批次号', value: info.batchId || '-' },
        { key: '6', field: '状态', value: getStatusText(info.status) },
        ...(info.qrCodeUrl ? [{ key: '7', field: '二维码URL', value: info.qrCodeUrl }] : []),
        ...(info.remark ? [{ key: '8', field: '备注', value: info.remark }] : []),
        ...(info.createdTime ? [{ key: '9', field: '创建时间', value: info.createdTime }] : [])
      ]
    })

    const appTableData = computed(() => {
      if (!data.value?.appInfo) return []
      const info = data.value.appInfo
      return [
        { key: '1', field: '应用ID', value: info.appId || '-' },
        { key: '2', field: '应用名称', value: info.appName || '-' },
        { key: '3', field: '商户ID', value: info.merchantId || '-' },
        { key: '4', field: '应用类型', value: getAppTypeText(info.appType) },
        { key: '5', field: '连接模式', value: getConnectModeText(info.connectMode) },
        { key: '6', field: '状态', value: getStatusText(info.status) },
        ...(info.notifyUrl ? [{ key: '7', field: '通知URL', value: info.notifyUrl }] : []),
        ...(info.returnUrl ? [{ key: '8', field: '返回URL', value: info.returnUrl }] : []),
        ...(info.createdTime ? [{ key: '9', field: '创建时间', value: info.createdTime }] : [])
      ]
    })

    const merchantTableData = computed(() => {
      if (!data.value?.merchantInfo) return []
      const info = data.value.merchantInfo
      return [
        { key: '1', field: '商户ID', value: info.merchantId || '-' },
        { key: '2', field: '商户名称', value: info.merchantName || '-' },
        { key: '3', field: '服务商ID', value: info.providerId || '-' },
        { key: '4', field: '代理商ID', value: info.agentId || '-' },
        { key: '5', field: '联系人', value: info.contactName || '-' },
        { key: '6', field: '联系电话', value: info.contactTelephone || '-' },
        { key: '7', field: '状态', value: getStatusText(info.status) },
        ...(info.createdTime ? [{ key: '8', field: '创建时间', value: info.createdTime }] : []),
        ...(info.remark ? [{ key: '9', field: '备注', value: info.remark }] : [])
      ]
    })

    const providerTableData = computed(() => {
      if (!data.value?.serviceProviderInfo) return []
      const info = data.value.serviceProviderInfo
      return [
        { key: '1', field: '服务商ID', value: info.providerId || '-' },
        { key: '2', field: '服务商名称', value: info.providerName || '-' },
        { key: '3', field: '服务商类型', value: getProviderTypeText(info.providerType) },
        { key: '4', field: '联系人', value: info.contactPerson || '-' },
        { key: '5', field: '联系电话', value: info.contactPhone || '-' },
        { key: '6', field: '联系邮箱', value: info.contactEmail || '-' },
        { key: '7', field: '商户数量', value: String(info.merchantCount || 0) },
        { key: '8', field: '状态', value: getStatusText(info.status) },
        ...(info.createdTime ? [{ key: '9', field: '创建时间', value: info.createdTime }] : [])
      ]
    })

    const channelConfigColumns = [
      { title: '字段', dataIndex: 'field', key: 'field', width: 120 },
      { title: '值', dataIndex: 'value', key: 'value' }
    ]

    // 服务商渠道配置表格数据
    const serviceProviderChannelConfigTableData = computed(() => {
      if (!data.value?.serviceProviderChannelConfig) return []
      const info = data.value.serviceProviderChannelConfig
      return [
        { key: '1', field: '配置ID', value: info.configId || '-' },
        { key: '2', field: '配置类型', value: getConfigTypeText(info.configType) },
        { key: '3', field: '拥有者ID', value: info.ownerId || '-' },
        { key: '4', field: '拥有者类型', value: getOwnerTypeText(info.ownerType) },
        { key: '5', field: '渠道代码', value: info.channelCode || '-' },
        { key: '6', field: '连接模式', value: getConnectModeText(info.connectMode) },
        ...(info.configData ? [{ key: '7', field: '配置数据', value: formatConfigData(info.configData) }] : []),
        ...(info.createdTime ? [{ key: '8', field: '创建时间', value: info.createdTime }] : []),
        ...(info.updatedTime ? [{ key: '9', field: '更新时间', value: info.updatedTime }] : [])
      ]
    })

    // 子商户渠道配置表格数据
    const subMerchantChannelConfigTableData = computed(() => {
      if (!data.value?.subMerchantChannelConfig) return []
      const info = data.value.subMerchantChannelConfig
      return [
        { key: '1', field: '配置ID', value: info.configId || '-' },
        { key: '2', field: '配置类型', value: getConfigTypeText(info.configType) },
        { key: '3', field: '拥有者ID', value: info.ownerId || '-' },
        { key: '4', field: '拥有者类型', value: getOwnerTypeText(info.ownerType) },
        { key: '5', field: '渠道代码', value: info.channelCode || '-' },
        { key: '6', field: '连接模式', value: getConnectModeText(info.connectMode) },
        ...(info.configData ? [{ key: '7', field: '配置数据', value: formatConfigData(info.configData) }] : []),
        ...(info.createdTime ? [{ key: '8', field: '创建时间', value: info.createdTime }] : []),
        ...(info.updatedTime ? [{ key: '9', field: '更新时间', value: info.updatedTime }] : [])
      ]
    })

    // 直连商户渠道配置表格数据
    const directMerchantChannelConfigTableData = computed(() => {
      if (!data.value?.directMerchantChannelConfig) return []
      const info = data.value.directMerchantChannelConfig
      return [
        { key: '1', field: '配置ID', value: info.configId || '-' },
        { key: '2', field: '配置类型', value: getConfigTypeText(info.configType) },
        { key: '3', field: '拥有者ID', value: info.ownerId || '-' },
        { key: '4', field: '拥有者类型', value: getOwnerTypeText(info.ownerType) },
        { key: '5', field: '渠道代码', value: info.channelCode || '-' },
        { key: '6', field: '连接模式', value: getConnectModeText(info.connectMode) },
        ...(info.configData ? [{ key: '7', field: '配置数据', value: formatConfigData(info.configData) }] : []),
        ...(info.createdTime ? [{ key: '8', field: '创建时间', value: info.createdTime }] : []),
        ...(info.updatedTime ? [{ key: '9', field: '更新时间', value: info.updatedTime }] : [])
      ]
    })

    // 获取产品列表
    const fetchProductList = async () => {
      try {
        productLoading.value = true
        const response = await apiPayProductDictFetchList({
          pageNumber: 1,
          pageSize: 100
        })

        if (response && response.data?.records) {
          productList.value = response.data.records
          // 设置默认选择微信JSAPI支付 - 使用产品编码
          const defaultProduct = productList.value.find(p => p.productCode === 'WXPAY_JSAPI')
          if (defaultProduct) {
            selectedProduct.value = defaultProduct.productId
          }
        }
      } catch (err) {
        console.error('获取产品列表失败:', err)
      } finally {
        productLoading.value = false
      }
    }

    // 获取数据
    const fetchData = async (qrcode: string) => {
      if (!qrcode.trim()) {
        error.value = '请输入二维码ID'
        return
      }

      loading.value = true
      error.value = ''
      hasSearched.value = true

      try {
        const response = await fetch(`/api/suanzhu/qrcode/entry?qrcode=${encodeURIComponent(qrcode)}`)

        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`)
        }

        const result = await response.json()

        if (!result.success) {
          throw new Error(result.message || '查询失败')
        }

        if (result.data?.error) {
          throw new Error(result.data.error)
        }

        data.value = result.data
      } catch (err: any) {
        console.error('查询失败:', err)
        error.value = err.message || '查询失败，请稍后重试'
        data.value = null
      } finally {
        loading.value = false
      }
    }

    // 搜索处理
    const handleSearch = () => {
      fetchData(inputQrcode.value)
    }

    // 状态相关方法
    const getStatusText = (status?: number) => {
      return status === 1 ? '启用' : '禁用'
    }

    const getAppTypeText = (type?: number) => {
      const types: Record<number, string> = {
        1: 'Web应用',
        2: '移动应用',
        3: '小程序'
      }
      return types[type || 1] || '未知'
    }

    const getConnectModeText = (mode?: number) => {
      const modes: Record<number, string> = {
        1: '直连',
        2: '间连'
      }
      return modes[mode || 1] || '未知'
    }

    const getProviderTypeText = (type?: number) => {
      const types: Record<number, string> = {
        1: '平台服务商',
        2: '第三方服务商'
      }
      return types[type || 1] || '未知'
    }

    const getConfigTypeText = (type?: number) => {
      const types: Record<number, string> = {
        1: '渠道配置',
        2: '商户渠道配置',
        3: '应用产品渠道配置'
      }
      return types[type || 1] || '未知'
    }

    const getOwnerTypeText = (type?: number) => {
      const types: Record<number, string> = {
        1: '服务商',
        2: '子商户',
        3: '直连商户'
      }
      return types[type || 1] || '未知'
    }

    const formatConfigData = (configData?: string) => {
      if (!configData) return '-'
      try {
        const parsed = JSON.parse(configData)
        return JSON.stringify(parsed, null, 2)
      } catch {
        return configData
      }
    }

    // 初始化
    onMounted(async () => {
      // 加载产品列表
      await fetchProductList()

      const qrcodeParam = route.query.qrcode as string
      if (qrcodeParam) {
        inputQrcode.value = qrcodeParam
        fetchData(qrcodeParam)
      }
    })

    return {
      inputQrcode,
      data,
      loading,
      error,
      hasSearched,
      handleSearch,
      selectedProduct,
      productList,
      productLoading,
      connectModeText,
      connectModeColor,
      isDirectMode,
      isIndirectMode,
      qrcodeColumns,
      appColumns,
      merchantColumns,
      providerColumns,
      channelConfigColumns,
      qrcodeTableData,
      appTableData,
      merchantTableData,
      providerTableData,
      serviceProviderChannelConfigTableData,
      subMerchantChannelConfigTableData,
      directMerchantChannelConfigTableData,
      getStatusText,
      getAppTypeText,
      getConnectModeText,
      getProviderTypeText,
      getConfigTypeText,
      getOwnerTypeText,
      formatConfigData
    }
  }
})
</script>

<style scoped>
.suanzhu-page {
  padding: 16px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  background: white;
  padding: 20px 24px;
  margin-bottom: 16px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.logo {
  font-size: 24px;
  display: inline-block;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.search-section {
  background: white;
  padding: 16px 24px;
  margin-bottom: 16px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.form-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.product-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.connect-mode-tag {
  font-size: 12px;
  margin-left: 8px;
}

.loading-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.loading-text {
  color: #666;
}

.data-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 16px;
}

@media (min-width: 1200px) {
  .data-section {
    grid-template-columns: repeat(3, 1fr);
  }
}

.info-section {
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.disabled-section {
  position: relative;
}

.disabled-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 6px;
}

.disabled-message {
  background: rgba(255, 255, 255, 0.95);
  padding: 16px 24px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.disabled-icon {
  font-size: 24px;
  opacity: 0.8;
}

.disabled-text {
  color: #666;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.section-title {
  margin: 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.no-data-indicator {
  font-size: 12px;
  font-weight: normal;
  opacity: 0.8;
}

.no-data-placeholder {
  padding: 40px 20px;
  text-align: center;
  background: #fafafa;
  border-top: 1px solid #e8e8e8;
}

.no-data-placeholder :deep(.ant-empty) {
  margin: 0;
}

.no-data-placeholder :deep(.ant-empty-description) {
  color: #999;
  font-size: 13px;
}

:deep(.ant-table) {
  margin: 0;
}

:deep(.ant-table-thead > tr > th) {
  background: #fafafa;
  font-weight: 600;
  padding: 8px 12px;
}

:deep(.ant-table-tbody > tr > td) {
  padding: 8px 12px;
  word-break: break-all;
}

:deep(.ant-table-tbody > tr:nth-child(even)) {
  background: #fafafa;
}

:deep(.ant-empty) {
  background: white;
  padding: 40px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .suanzhu-page {
    padding: 8px;
  }

  .form-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .form-row .ant-select,
  .form-row .ant-input {
    width: 100% !important;
  }

  .connect-mode-tag {
    align-self: center;
    margin-left: 0;
    margin-top: 8px;
  }

  :deep(.ant-table-tbody > tr > td) {
    font-size: 12px;
  }
}
</style>